<!doctype html>
<html lang="zh-cn">
	<head>
		<meta charset="UTF-8" />
		<meta name="format-detection" content="telephone=no" />
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
		<script src="lib/rem.js"></script>
		<link rel="stylesheet" href="css/reset.css" />
		<title>自适应table</title>
		<style type="text/css">
			#jytables{
				/*不需要可自己删除*/
				padding: .2rem;
			}
			#jytables table{
				width: 100%;
				border-collapse: collapse;
			}
			#jytables table td {
				padding: .3rem 0;
				border: 1px solid #E0E0E0;
				text-align: center;
				vertical-align: middle;
			}
			#jytables table thead{
				font-size: .28rem;
				color: #686868;
			}
			#jytables table tbody{
				font-size: .3rem;
				color: #1d1d1d;
			}
			/*高亮字体*/
			#jytables table span.higHlight{
				color: #2cb7ca;
			}
		</style>
	</head>
	<body>
		<section id="jytables">
			<table>
				<thead>
					<tr>
						<td>序号</td>
						<td>中标日期</td>
						<td>项目名称</td>
						<td>中标金额
(万元)</td>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>1</td>
						<td>2017 0721</td>
						<td><span class="higHlight">五峰土家族自治县</span>LED单色
户外电子屏采购项目</td>
						<td>1.30</td>
						
					</tr>
					<tr>
						<td>2</td>
						<td>2017 0721</td>
						<td>G320下司至麻江良田公路
改扩建项目</td>
						<td>31</td>
						
					</tr>
				</tbody>
			</table>
		</section>
	</body>
	
</html>